<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
    <title>图书馆</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/bookDetail.css" rel="stylesheet">
    <script src="https://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <meta charset="utf-8">
</head>
<body>
<div class="hobbies">
    <a href="javascript:window.history.back();">
        <div class="arrow">
        </div>
    </a>
    <div class="book">
        <div class="conBigTitle">
            <h2>${book.bookName}</h2>
            <p>
                <a href="#" target="_blank">熬过无人问津的日子</a>
                <a href="#" target="_blank">才能迎来鲜花与掌声</a>
            </p>
        </div>
        <div class="show">
            <div class="showLeft">
                <div class="image">
                    <a href="#" target="_blank" title="杀死一只知更鸟">
                        <img alt="" class="bookCover lazy"
                             src="${book.coverPath}"
                             title="${book.bookName}" width="158px" height="190px">
                    </a>
                </div>
                <ul>
                    <li><a href="#" target="_blank" title="杀死一只知更鸟">书名：${book.bookName}</a>
                    </li>
                    <li><a href="#">
                        <p class="author">作者：${book.author}</p>
                    </a></li>
                    <li><a href="#">
                        <p class="author">每日费用：${book.price}</p>
                    </a></li>
                    <li><a href="#" target="_blank">书籍库存：${book.bookCounts} 本</a></li>
                    <li>
                        <c:choose>
                            <c:when test="${book.bookCounts == 0}">
                                <div class="shopcar">书已经借光辣！</div>
                            </c:when>
                            <c:otherwise>
                                <button class="shopcar" data-toggle="modal" data-target="#addModal">我要借走它！</button>
                            </c:otherwise>
                        </c:choose>
                    </li>
                </ul>
                <div class="jianjie">
                    <h4>书籍简介：</h4>
                    <p class="introduce">
                        ${book.detail}
                    </p>
                </div>
            </div>

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-2" style="border: 1px solid #2b0505;border-bottom: none">
                    <center>
                        <li>
                            <a href="#" target="_blank" title="三体">
                                <img alt="三体" class="lazy"
                                     src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/08c0f360/group61/M00/9C/7A/CmQUOVycjHiEHEavAAAAAAqB0h8765287492.jpg?v=zzHQJdFa&t=CmQUOV6IxR4."
                                     title="三体" height="200px" width="150px">
                            </a>
                            <p class="bookName">
                                <a href="#" target="_blank" title="三体">三体</a>
                            </p>
                            <p>刘慈欣</p>
                        </li>
                    </center>
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-2" style="border: 1px solid #2b0505;border-bottom: none">
                    <center>
                        <li>
                            <a href="#" target="_blank" title="东方快车谋杀案">
                                <img alt="东方快车谋杀案" class="lazy"
                                     src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_156,h_208,q_100/df3739e2/group6/M00/5E/7E/CmRaIVso1IiEXmfBAAAAACIOS7I167274228.jpg?v=nYLsetif&t=CmQUN2ERWkg."
                                     title="东方快车谋杀案" height="200px" width="150px">
                            </a>
                            <p class="bookName">
                                <a href="#" target="_blank" title="东方快车谋杀案">东方快车谋杀案</a>
                            </p>
                            <p>阿加莎</p>
                        </li>
                    </center>
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-2" style="border: 1px solid #2b0505;border-top: none">
                    <center>
                        <li class="tb">
                            <a href="#" target="_blank" title="活着">
                                <img alt="活着" class="lazy"
                                     src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_156,h_208,q_100/5dd12d3b/group6/M00/2B/41/CmQUOFcMj9CEBj_gAAAAAI1eU64427806210.jpg?v=pM2Jvx9M&t=CmQUN16Is6s."
                                     title="活着" height="200px" width="150px">
                            </a>
                            <p class="bookName">
                                <a href="#" target="_blank" title="活着">活着</a>
                            </p>
                            <p>余华</p>
                        </li>
                    </center>
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-2" style="border: 1px solid #2b0505;border-top: none">
                    <center>
                        <li class="tb">
                            <a href="#" target="_blank" title="月亮和六便士">
                                <img alt="月亮和六便士" class="lazy"
                                     src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_156,h_208,q_100/a664a4b6/group6/M00/BB/58/CmQUN1oVRnKEBKybAAAAANegkxw978046032.jpg?v=aZusShmL&t=CmQUN16IuYQ."
                                     title="月亮和六便士" height="200px" width="150px">
                            </a>
                            <p class="bookName">
                                <a href="#" target="_blank" title="月亮和六便士">月亮和六便士</a>
                            </p>
                            <p>毛姆</p>
                        </li>
                    </center>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加借书申请 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title" id="myModalLabel">提交借书申请</h4>
                </div>
                <form action="${pageContext.request.contextPath}/borrow/generalSubmit" id="lg-form" name="lg-form"
                      class="form-horizontal" method="post">
                    <input type="hidden" name="borrowerEmail" value="${sessionScope.userMessage.email}">
                    <input type="hidden" name="bookID" value="${book.bookID}">

                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="beginDate">开始日期：</label>
                            <div class="col-sm-9">
                                <input id="beginDate" type="date" name="beginDate" class="form-control" required/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="duration">借书时长（天）</label>
                            <div class="col-sm-9">
                                <input id="duration" type="text" name="duration" class="form-control" required/>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">提交申请</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>